import React, {useEffect, useState} from "react";
import {Dimensions, StyleSheet, View} from "react-native";
import {TabView} from "react-native-elements";
import {Tab} from "react-native-elements/dist/tab/Tab";
import {SvgXml} from "react-native-svg";
import {
    findColorfulSvgXml,
    findGreySvgXml,
    marketColorSvgXml,
    marketGreySvgXml,
    meColorfulSvgXml,
    meGreySvgXml,
    walletColorfulSvgXml,
    walletGreySvgXml
} from "../libs/svgXml";
import L2_HomeView from "./L2_HomeView";
import L2_Mine from "./L2_Mine";
import {getIsLogin, initAllProviderUrlInfo, initETH_More_Logo} from "./smartxL2Libs/L2_Data";
import L2_Login from "./L2_Login";
import AsyncStorage from "@react-native-async-storage/async-storage";
import {useFocusEffect} from "@react-navigation/native";

const {width,height,scale} = Dimensions.get("window");
let refresh_L2_Tabs = true
const L2_Tabs = ({navigation,route}:any) => {
    const [refresh,setRefresh] = useState(route?.params?.refresh || true)
    const [showView,setShowView] = useState(false);
    const [isLogin, setIsLogin] = useState(true);
    const [Asset_Index, setAsset_Index] = useState(0);
    const work = async () => {
        let Keys = await AsyncStorage.getAllKeys()
        console.log(Keys)
        // for(let i = 0 ;i < Keys.length ; i++)
        // {
        //     if(Keys[i].indexOf("L2_")===0)
        //     {
        //         await AsyncStorage.removeItem(Keys[i])
        //     }
        // }
        // await initAllProviderUrlInfo()
        // await initETH_More_Logo()
        let isLoginTemp = await getIsLogin();
        console.log('isLogin----------'+isLoginTemp)
        setIsLogin(isLoginTemp);
        setShowView(true)
    }
    useEffect(()=>{
        console.log(`useEffect`,refresh_L2_Tabs)
        if(!refresh_L2_Tabs)
        {
            return;
        }
        refresh_L2_Tabs = false
        setRefresh(false)
        work()
    },[refresh])
    useFocusEffect(
        React.useCallback(() => {
            work()
            return ()=> {
            };
        }, [])
    );

    return (
        <View style={{flex:1}}>
            {
                showView?
                    <TabView value={Asset_Index} animationType={"spring"}>
                        <TabView.Item style={{width:"100%"}}>
                            {
                                isLogin?
                                    <L2_HomeView navigation={navigation}/>
                                    :
                                    <L2_Login navigation={navigation}/>
                            }
                        </TabView.Item >
                        <TabView.Item style={{width:"100%"}}>
                            {/*<L2_HomeView navigation={navigation}/>*/}
                        </TabView.Item >
                        <TabView.Item style={{width:"100%"}}>
                            {/*<L2_HomeView navigation={navigation}/>*/}
                        </TabView.Item >
                        <TabView.Item style={{width:"100%"}}>
                            <L2_Mine navigation={navigation}/>
                        </TabView.Item>
                    </TabView>
                    :
                    <View style={{flex:1}}/>
            }

            <View style={styles.tabStyle}>
                <Tab value={Asset_Index} variant={'default'} onChange={(i) => {
                    refresh_L2_Tabs = true
                    setRefresh(!refresh)
                    setAsset_Index(i)
                }}
                     disableIndicator={false}
                >
                    <Tab.Item title={"资产"}
                              background={null}
                              buttonStyle={{padding: 0, margin: 0}}
                              containerStyle={{backgroundColor: "white"}}
                              titleProps={{
                                  style: {
                                      padding: 0,
                                      // marginLeft: -25,
                                      color: Asset_Index===0?"#71cbdf":"#dbdbdb",
                                      fontSize: 10,
                                      lineHeight: 20
                                  }
                              }}
                              icon={<SvgXml xml={Asset_Index===0?walletColorfulSvgXml:walletGreySvgXml} width={20} height={20}/>}
                    />
                    <Tab.Item title="市场"
                              background={null}
                              buttonStyle={{padding: 0, margin: 0,}}
                              containerStyle={{backgroundColor:  "white"}}
                              titleProps={{
                                  style: {
                                      padding: 0,
                                      // marginLeft: -25,
                                      color: Asset_Index===1?"#8c9eff":"#dbdbdb",
                                      fontSize: 10,
                                      lineHeight: 20,
                                  }
                              }}
                              icon={<SvgXml xml={Asset_Index===1?marketColorSvgXml:marketGreySvgXml} width={20} height={20}/>}
                    />
                    <Tab.Item title="发现"
                              background={null}
                              buttonStyle={{padding: 0, margin: 0,}}
                              containerStyle={{backgroundColor: "white"}}
                              titleProps={{
                                  style: {
                                      padding: 0,
                                      // marginLeft: -25,
                                      color: Asset_Index===2?"#1081e0":"#dbdbdb",
                                      fontSize: 10,
                                      lineHeight: 20,
                                  }
                              }}
                              icon={<SvgXml xml={Asset_Index===2?findColorfulSvgXml:findGreySvgXml} width={20} height={20}/>}
                    />
                    <Tab.Item title="我的"
                              background={null}
                              buttonStyle={{padding: 0, margin: 0,}}
                              containerStyle={{backgroundColor: "white"}}
                              titleProps={{
                                  style: {
                                      padding: 0,
                                      // marginLeft: -25,
                                      color: Asset_Index===3?"#13227a":"#dbdbdb",
                                      fontSize: 10,
                                      lineHeight: 20,
                                  }
                              }}
                              icon={<SvgXml xml={Asset_Index===3?meColorfulSvgXml:meGreySvgXml} width={20} height={20}/>}
                    />
                </Tab>
            </View>
        </View>
    )
}
const styles = StyleSheet.create({
    tabStyle: {
        width: "100%",
        alignItems: "flex-start",
        paddingRight:10,
        borderTopWidth:1/scale,
        paddingTop:10
    },
})

export default L2_Tabs;


